{{define "index.html"}}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeCover</title>
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="container" id="login-container">
        <h2>登录</h2>
        <form action="/login" method="post" id="login-form">
            <input type="text" name="username" placeholder="用户名" required>
            <input type="password" name="password" placeholder="密码" required>
            <button type="submit">登录</button>
        </form>
        <div class="toggle-link">
            <a href="#" onclick="toggleForm()">没有账号？注册</a>
        </div>
    </div>

    <div class="container" id="register-container" style="display: none;">
        <h2>注册</h2>
        <form action="/register" method="post" id="register-form">
            <input type="text" name="username" placeholder="用户名" required>
            <input type="password" name="password" placeholder="密码" required>
            <button type="submit">注册</button>
        </form>
        <div class="toggle-link">
            <a href="#" onclick="toggleForm()">已有账号？登录</a>
        </div>
    </div>

    <script>
        function toggleForm() {
            const loginContainer = document.getElementById("login-container");
            const registerContainer = document.getElementById("register-container");
            if (loginContainer.style.display === "none") {
                loginContainer.style.display = "block";
                registerContainer.style.display = "none";
            } else {
                loginContainer.style.display = "none";
                registerContainer.style.display = "block";
            }
        }

        //通用验证函数
        function validateCredentials(username, password) {
            const regex = /^[\w]{1,15}$/;
            if(!regex.test(username)) {
                alert("用户名只能包含字母、数字和下划线，且不超过15个字符！");
                return false;
            }
            if (!regex.test(password)) {
                alert("密码只能包含字母、数字和下划线，且不超过15个字符！");
                return false;
            }
            return true;
        }

        // 注册表单提交
        document.getElementById("register-form").addEventListener("submit", async function (event) {
            event.preventDefault(); //阻止默认表单提交

            const formData = new FormData(event.target)
            const username = formData.get("username")
            const password = formData.get("password")

            if(!validateCredentials(username, password)) 
                return;
            try {
                const response = await fetch("/register", {
                    method: "POST",
                    body: formData
                });
                const result = await response.json();
                if (response.ok) {
                    alert(result.message);                
                    toggleForm();
                } else {
                    alert(result.error)
                }
            } catch (error) {
                console.error("Error:", error);
                alert("请求发送失败,请检查网络连接");
            }  
        })

        // 登录
        document.getElementById("login-form").addEventListener("submit", async function (event) {
            event.preventDefault();

            const formData = new FormData(event.target);
            const username = formData.get('username');
            const password = formData.get('password');

            if (!validateCredentials(username, password)) return;

            try {
                const response = await fetch("/login", {
                    method: "POST",
                    body: formData,
                    // redirect: "manual"
                });


                if (response.ok) {
                    // 登录成功后的跳转逻辑
                    alert('登陆成功')
                    if(response.redirected) {
                        const redirectUrl = response.url;
                        window.location.href = redirectUrl;
                    }

                } else {
                    alert('登陆失败')
                }
            } catch (error) {
                console.error("Error:", error);
                alert("请求发送失败,请检查网络连接");
            }
        })

    </script>

</body>

</html>

{{end}}